<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix text-left">
        <el-col :span="23">
          <span class="title-icon">关联FBA号</span>
        </el-col>
      </div>
      <el-col :span="7">
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>九方子单号:</span>
          </el-col>
          <el-col :span="16">
            <el-input
              size="mini"
              :rows="10"
              v-model="subWaybillNo"
              ref="ref_1"
              @keyup.enter.native="findOrderNo"
              placeholder="支持九方子单号/运单号混合查找"
            ></el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>FBA箱号:</span>
          </el-col>
          <el-col :span="16">
            <el-input
              size="mini"
              :rows="10"
              v-model="fbaNo"
              ref="ref_2"
              @keyup.enter.native="findOrderNo"
              placeholder="请录入FBA箱号"
            ></el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px;margin-bottom: 10px;margin-left: 16%">
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="findOrderNo">
              确定
            </el-button>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="withdraw">
              撤回
            </el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="3">
        <el-row style="margin-top: 20px;margin-bottom: 30px">
          <el-col
            :span="8"
            style="width: 80px;height: 80px;line-height: 80px;border-radius: 40px;
                      border: 1px solid #ff7575;color: #ff7575;text-align: center;font-size: 26px;"
          >
            <span>{{ hasCount }}</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="5">
        <el-row style="margin-top: 20px;margin-bottom: 30px">
          <el-col :span="4">
            <span>应扫描数:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ count }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;margin-bottom: 30px">
          <el-col :span="4">
            <span>剩余数:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ remainCount }}</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="7">
        <el-row style="margin-top: 10px;">
          <el-col :span="4">
            <span>运单号:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ waybillNo }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>渠道名称:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ customerChannelName }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>目的国家:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ countryName }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>客户简称:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ customerNameShort }}</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;">
          <el-col :span="4">
            <span>客户代码:</span>
          </el-col>
          <el-col :span="16">
            <span>{{ customerCode }}</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="1" style="margin-bottom: 10px">
        <el-row style="margin-top: 10px;">
          <el-col :span="4">
            <el-button
              size="mini"
              type="primary"
              @click="saveRelevanceFbaNo"
              style="margin-left: 19%;margin-top: 134px;"
            >
              保存
            </el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-table :data="subWaybills" style="width: 100%">
        <el-table-column prop="subWaybillNo" label="已扫子单号">
        </el-table-column>
        <el-table-column prop="hsubNumber" label="已扫FBA号"> </el-table-column>
      </el-table>
    </el-card>
    <el-card>
      <el-table :data="subWaybillList" style="width: 100%">
        <el-table-column property="subWaybillNo" label="未扫箱号" style="color: #43C9A2;">
        </el-table-column>
        <el-table-column property="hsubNumber" label="FBA箱号" >
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
import axios from "axios";
import * as constant from "@/store/yg/common/constant";

export default {
  components: {},
  props: [],
  data() {
    return {
      subWaybills: [],
      subwaybill: {
        subWaybillNo: "",
        hsubNumber: ""
      },
      disable1: true,
      waybillNos: "",
      subWaybillNo: "",
      fbaNo: "",
      remainCount: "",
      orderCount: "",
      waybillNo: "",
      customerChannelName: "",
      countryName: "",
      customerNameShort: "",
      customerCode: "",
      cursubNo: 1,
      count: 0,
      waybillId: "",
      hasCount: "",
      sonNumber: [],
      curBox: "",
      acturlCount: "",
      subWaybillList: [],
      boxMap: {}
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$refs.ref_1.focus();
  },
  methods: {
    async findOrderNo() {
      var fbaNo = this.fbaNo;
      var subWaybillNo = this.subWaybillNo;
      if (0 == this.fbaNo.length && 0 < this.subWaybillNo.length&&this.disable1) {
        this.disable1 = false;
        if (this.subWaybills.length==0||this.subWaybills[this.subWaybills.length-1].hsubNumber) {
          await this.searchSubWaybillNo();
        }
      }
      if ("" != this.waybillNo && 0 < this.fbaNo.length) {
        if (!this.subWaybills[this.subWaybills.length-1].hsubNumber) {
          this.disable1 = true;
          this.showFbaNumber(this.fbaNo);
        }
      }
      for (var i = 0; i < this.subWaybillList.length; i++) {
        var relevanceFbaBox = this.subWaybillList[i];
        if (0 < fbaNo.length && fbaNo == relevanceFbaBox.hsubNumber) {
          relevanceFbaBox.hsubNumber = "";
        }
        if (0 < subWaybillNo.length) {
          var strs = subWaybillNo.split("-");
          if (strs[1] == relevanceFbaBox.subWaybillNo) {
            relevanceFbaBox.subWaybillNo = "";
          }
        }
        if (relevanceFbaBox.subWaybillNo.length <= 0 && relevanceFbaBox.hsubNumber.length <= 0) {
          this.subWaybillList.splice(i, 1); // 将使后面的元素依次前移，数组长度减1
          i--; // 如果不减，将漏掉一个元素
        } else {
          this.subWaybillList[i] = relevanceFbaBox;
        }
      }
    },
    showFbaNumber(fbaNoVal) {
      if (!fbaNoVal) {
        this.$message.error("请输入FBA箱号！");
        return false;
      }
      if (!this.curBox) {
        this.$message.error("请先扫描九方箱号！");
        return false;
      }
      if (this.curBox > this.count) {
        this.$message.error("非法的九方箱号！");
        return false;
      }
      var has = this.curBox in this.boxMap;
      if (!has) {
        this.boxMap[this.curBox] = fbaNoVal;
      }
      this.remainCount = parseInt(this.count) - parseInt(this.acturlCount); //剩余件数
      this.subwaybill.hsubNumber = this.fbaNo;
      this.subWaybills.pop();
      this.subWaybills.push(this.subwaybill);
      console.log(this.subWaybills);
      this.subWaybillNo = "";
      this.fbaNo = "";
      this.hasCount = this.sonNumber.length;
      this.$refs.ref_1.focus();
    },
    async searchSubWaybillNo() {
      var subNoVal = this.subWaybillNo;
      if (0 == subNoVal.length || -1 == subNoVal.indexOf("-")) {
        this.$message.error("请输入九方子单号或运单号查找！");
        this.disable1 = true;
        return false;
      }
      if (0 == this.sonNumber.length) {
        await ajax("searchSubWaybillNo", { subNoVal: subNoVal }).then(
          res => {
            if (res.code == 200) {
              var data = res.data;
              for (var index in data.subWaybills) {
                var relevanceFbaBox = {
                  subWaybillNo: "",
                  hsubNumber: ""
                };
                relevanceFbaBox.subWaybillNo = data.subWaybills[index].subWaybillNo;
                relevanceFbaBox.hsubNumber = data.subWaybills[index].boxNo;
                this.subWaybillList.push(relevanceFbaBox);
              }
              var subNo = data.subNo;
              this.sonNumber.push(subNo);
              this.curBox = subNo;
              this.count = data.count; //应扫描数
              var waybill = data.waybill;
              this.waybillId = waybill.id;
              this.hasCount = 0;
              this.remainCount = data.count;
              this.acturlCount = this.sonNumber.length; //实际件数
              this.remainCount =
                parseInt(this.count) - parseInt(this.acturlCount); //剩余件数

              this.waybillNo = waybill.waybillNo; // 运单号
              this.customerChannelName = data.customerChannelName; // 渠道名称
              this.countryName = data.countryName; // 国家
              this.customerNameShort = data.customerNameShort; // 客户简称
              this.customerCode = data.customerCode; // 客户代码
              this.subWaybills = [];
              this.subwaybill = {};
              this.subwaybill.subWaybillNo = data.subNoVal;
              this.subWaybills.push(this.subwaybill);
              this.$refs.ref_2.focus();
              this.subWaybillNo = "";
              this.fbaNo = "";
            } else {
              this.$message.error("操作失败"+res.message);
              this.disable1 = true;
              this.$refs.ref_1.focus();
            }
          },
          error => {
            console.log(error);
            this.disable1 = true;
          }
        );
      } else {
        var no = subNoVal.substring(0, subNoVal.indexOf("-"));
        if (no == this.waybillNo) {
          var subNo = subNoVal.substring(
            subNoVal.indexOf("-") + 1,
            subNoVal.length
          );
          if (
            subNo == "" ||
            isNaN(subNo) ||
            Number(subNo) <= 0 ||
            Number(subNo) > this.count
          ) {
            this.$message.error("子单号错误！");
            this.subWaybillNo = "";
            this.$refs.ref_1.focus();
            this.disable1 = true;
            return false;
          }
          if (this.sonNumber.indexOf(subNo) > -1) {
            this.$message.error("当前货箱已经扫描");
            this.subWaybillNo = "";
            this.$refs.ref_1.focus();
            this.disable1 = true;
          } else {
            this.sonNumber.push(subNo);
            this.acturlCount = this.sonNumber.length;
            this.remainCount =
              parseInt(this.count) - parseInt(this.acturlCount);
            this.hasCount = this.acturlCount;
            this.curBox = subNo;
            if (this.subWaybills) {
              this.subwaybill = {};
              this.subwaybill["subWaybillNo"] = subNoVal;
              this.subWaybills.push(this.subwaybill);
            }
            this.subWaybillNo = "";
            this.fbaNo = "";
            this.$refs.ref_2.focus();
          }
        } else {
          this.$message.error("一次只能扫描一个运单的数据");
          this.subWaybillNo = "";
          this.$refs.ref_1.focus();
          this.disable1 = true;
        }
      }
    },
    withdraw() {
      if (this.subWaybills[this.subWaybills.length-1].hsubNumber) {
        if (this.remainCount + this.hasCount == this.count) {
          this.remainCount = ++this.remainCount;
        }
        this.hasCount = --this.hasCount;
        this.$delete(this.subWaybills[this.subWaybills.length - 1], "hsubNumber");
        this.$refs.ref_2.focus();
      }
    },
    saveRelevanceFbaNo() {
      if (!this.waybillId) {
        this.$message.error("请先录入数据");
        this.subWaybillNo.focus();
        return false;
      }
      if (this.count != this.hasCount) {
        this.$message.error("已扫件数不等于应扫描件数");
        return false;
      }
      var has = this.waybillId in this.boxMap;
      if (!has) {
        this.boxMap["waybillId"] = this.waybillId;
      }
      var fbaNoStr = JSON.stringify(this.boxMap);
      ajax("saveRelevanceFbaNo", { fbaNoStr: fbaNoStr }).then(
        res => {
          console.log(res);
          if (res.code == 200) {
            this.$message.success("保存成功");
            location.reload();
          }else{
            this.$message.error("保存失败"+res.message);
          }
        },
        error => {
          console.log(error);
        }
      );
    }
  }
};
</script>
<style></style>
